<template>
    <div class="ctbsc-detail">
        <div class="bread_box wp mt10">
            <div class="bread">
                <!--<a href="/"><span class="myfont">&#xe651;</span>首页</a>
                <span
                        class="myfont rightico">&#xe68f;</span><a
                    href="">党课范文</a><span
                    class="myfont rightico">&#xe68f;</span>-->
                <span>{{info.title}}</span>
            </div>
        </div>
        <div class="doc_box wp keke_doc_clearfix mt10">
            <div class="viewtop keke_doc_clearfix" style="min-height: 228px;height: auto;">
                <div class="docinfobox" style="padding-right:220px" v-if="info.title" id="gm">
                    <div class="left_cover">
                        <span class="icomarker actives">docx</span>
                        <img src="/static/picture/wordys.jpg">
                    </div>
                    <h2 style="min-height: 26px;">{{info.title}}</h2>
                    <div class="docsummary" style="display: flex;align-items: center;margin-top:0px;">
                        <span class="myfont">&#xe634;</span> 发布 {{info.created_at}}<span class="divider"></span>
                        <span class="myfont">&#xe619;</span> 下载次数 {{info.download_num}} <span class="divider"></span>
                        <span class="myfont">&#xe694;</span> 浏览次数 {{info.see_num}} <span class="divider"></span>
<!--                        <span class="myfont" ></span> <span style="color: red">已收藏</span> <span class="divider"></span>-->
                        <!--                        <a href="javascript:" class="doc_mobile"><span><i-->
                        <!--                                class="myfont">&#xe68c;</i> 手机查看</span></a><span class="divider"></span>-->

                        <share :config="config" v-if="config.title"></share>
                    </div>

                    <div class="price mt10">
                        <span class="f12 active">
                            <em class="f-num">
                                <div class="item vip" v-if="!info.is_show_download">VIP会员可免费下载</div>
                                <div class="item vip" v-else>相关权限已开放</div>
                            </em>
                        </span>
                    </div>
                    <div class="downbtnbox mt10">
                        <router-link class="downbtn actives" title="开通会员" v-if="!$store.getters.userInfo||!$store.getters.userInfo['ex_is_member']||$store.getters.userInfo['ex_is_member']==2"
                                     target="_blank" tag="a" to="/vip">开通会员
                        </router-link>
                        <template v-if="info.type=='ppt'||info.type=='pptx'">
                            <a href="javascript:;"  @click="downLoadMore" class="downbtn bottomviewbtn noxz"
                               style="margin-right:0px;">下载PPT和演讲稿</a>
                            <a href="javascript:;"  @click="downLoad" class="downbtn bottomviewbtn noxz"
                               style="margin-right:0px;">下载PPT</a>
                            <a href="javascript:;"  @click="downLoadText" class="downbtn bottomviewbtn noxz"
                               style="margin-right:0px;">下载PPT演讲稿</a>
                        </template>
                        <template v-else>
                            <a href="javascript:;"  @click="downLoad" class="downbtn bottomviewbtn noxz"
                               style="margin-right:0px;">马上下载</a>

                        </template>
                        <a href="javascript:;" style="margin-left:15px;" v-if="!info.is_show_download" class="downbtn actives" title="单独购买本文档"
                           @click="wechatPay">单独购买本文档（￥{{info.price}}）</a>

                        <a @click="favorite(2)" v-if="info.is_favorite==1" href="javascript:;" style="margin-left:14px;" class="downbtn">已收藏</a>
                        <a @click="favorite(1)" v-else href="javascript:;" style="margin-left:14px;" class="downbtn actives" title="收藏本文">收藏本文</a>
                    </div>
                </div>
            </div>
            <div class="mainpart">
                <div class="viewright">
                    <div class="widget">
                        <a href="/" target="_blank">
<!--                            <img src="/static/picture/ysnenr75p1x7j3j.png">-->
                        </a>
                    </div>
                    <div class="modbox">
                        <div class="viewright_mod keke_doc_clearfix">
                            <div class="mod_top_nav">
                                <h2>最新发布</h2>
                            </div>
                            <div class="doc_list">
                                <ul class="newdoclist keke_doc_clearfix">

                                    <li v-for="(item,index) in last">
                                        <span>{{item['created_at']}}</span>

                                        <i :style="'position:absolute; left:0px; top:5px;font-size:16px;width: 16px;height: 16.8px;color:'+$utils.getIconColor(item.type)"
                                           :class="'far '+$utils.getIcon(item.type)"></i>
                                        <router-link :title="item.title" target="_blank" tag="a"
                                                     :to="'/detail/'+item.id">{{item.title}}
                                        </router-link>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div class="modboxend"></div>
                    </div>
                </div>


                <div class="viewleft">
                    <div :class="info.is_show_download?'docviewbox':'docviewbox readonly'"  @keydown="handlePaste($event)">
<!--                    <div :class="info.is_show_download?'docviewbox':'docviewbox readonly'" @contextmenu.prevent @keydown="handlePaste($event)">-->
                        <div class="viewpage">
                            <div class="container">
                                <div class="detail" v-if="info.content" v-html="info.content">

                                </div>
                                <div class="con-box" v-if="info.img_urls">
                                    <img :src="$config.apiUrl+'/'+info.img_urls" alt="">
                                </div>
                                <div v-if="!info.is_show_download"
                                     style="margin:5px 0px 30px 0px;border-bottom:2px dotted #888;height:15px;text-align:center;font-size:20px;">
                                    ✂
                                </div>
                            </div>


                            <div class="article-tips" style="padding:5px;" v-if="!info.is_show_download">
                                <div class="active">
                                    <!--                                    <i class="icon icon-smile"></i>-->
                                    <i class="far fa-smile"></i>
                                  试读已经结束，开通会员可查阅全文，下载本站所有内容（Word文档可复制、可修改），网站资料每日更新中..会员分多种类型，可根据自己实际需要选择！如遇无法支付，请联系客服微信：xywenhui2025
                                </div>
                            </div>
                            <div class="pageinfo">
                                <router-link class="goto-page" style="text-align: left" :title="before.title"
                                             :to="'/detail/'+before.id">上一篇：{{before.title}}
                                </router-link>
                                <router-link class="goto-page" :title="next.title" :to="'/detail/'+next.id">
                                    下一篇：{{next.title}}
                                </router-link>

                            </div>
                        </div>
                    </div>


                    <div class="endpage">
                        <div class="surplustip" v-if="!info.is_show_download"><span class="surplus active">本内容为付费内容，请先购买或加入会员！</span>
                        </div>
                        <div class="surplustip" v-else><span class="surplus active">本内容可下载</span></div>
                        <div class="downbtnbox" style="margin-bottom:10px;">
                            <router-link class="downbtn actives" title="开通会员" v-if="!$store.getters.userInfo||!$store.getters.userInfo['ex_is_member']||$store.getters.userInfo['ex_is_member']==2"
                                         target="_blank" tag="a" to="/vip">开通会员
                            </router-link>
                            <template v-if="info.type=='ppt'||info.type=='pptx'">
                                <a href="javascript:;"  @click="downLoadMore" class="downbtn bottomviewbtn noxz"
                                   style="margin-right:0px;">下载PPT和演讲稿</a>
                                <a href="javascript:;"  @click="downLoad" class="downbtn bottomviewbtn noxz"
                                   style="margin-right:0px;">下载PPT</a>
                                <a href="javascript:;"  @click="downLoadText" class="downbtn bottomviewbtn noxz"
                                   style="margin-right:0px;margin-left:15px;">下载ppt演讲稿</a>
                            </template>
                            <template v-else>
                                <a href="javascript:;"  @click="downLoad" class="downbtn bottomviewbtn noxz"
                                   style="margin-right:0px;">马上下载</a>
                            </template>



                            <a href="javascript:;" v-if="!info.is_show_download" class="downbtn actives"
                               style="margin-left:15px;" title="单独购买本文档" @click="wechatPay">单独购买本文档（￥{{info.price}}）</a>
                        </div>

                    </div>
                    <div class="widget">
                        <a href="/" target="_blank">
<!--                            <img src="/static/picture/oyuzzgssazavsaz.png">-->
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <Login v-model="showLogin" @success="loginSuccess"></Login>
        <PayArticle v-model="showPay" :payInfo="info" @success="paySuccess"></PayArticle>
    </div>
</template>

<script>
    import Login from "@/components/Login";
    import PayArticle from "@/components/PayArticle";

    export default {
        name: "DetailView",
        components: {
            Login,
            PayArticle
        },
        data() {
            return {
                showLogin: false,
                showPay: false,
                loading: false,
                info: {},
                last: [],
                next: {},
                before: {},
                config: {
                    url: window.location.href, // 网址，默认使用 window.location.href
                    source: 'https://ctbsc.lyxinxiangyi.cn', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
                    title: '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
                    description: '', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
                    image: '', // 图片, 默认取网页中第一个img标签
                    sites: ['qzone', 'qq', 'weibo', 'wechat', 'douban'], // 启用的站点
                    disabled: ['google', 'facebook', 'twitter'], // 禁用的站点
                    wechatQrcodeTitle: '微信扫一扫：分享', // 微信二维码提示文字
                    wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'

                }
            };
        },
        created() {
            this.getInfo();
        },
        methods: {

            favorite(isFavorite){

              if (!this.$store.getters.token) {
                this.loginShow();
                return;
              }

              this.$apis.favorite({action:isFavorite,article_id:this.info.id})
              this.info.is_favorite=isFavorite
            },

            loginShow() {
                // this.showLogin = true;
                this.$message.error("亲，右上角~~请先微信扫码登录！")
            },
            loginSuccess() {
                this.wechatPay()
            },
            paySuccess() {
                // console.log('paySuccess');
                this.getInfo();
            },
            wechatPay(item) {

                if (!this.$store.getters.token) {
                    this.loginShow();
                } else {
                    this.showPay = true;
                }

            },
            downLoadText(){
                if (!this.info.is_show_download) {
                    this.$message.error("请先开通会员或单独购买本文档")
                    return;
                }
                let link = document.createElement("a");
                //创建一个a标签
                link.style.display = "none";
                link.href = `${this.$config.apiUrl}/api/exportFile?id=${this.info.id}&downloadType=word&token=${this.$store.getters.token}`;
                //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
                link.setAttribute("download", name);
                // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
                document.body.appendChild(link);
                //将上面创建的a标签加入到body的尾部
                link.click();
            },
          downLoad() {

            if (!this.info.is_show_download) {
              this.$message.error("请先开通会员或单独购买本文档")
              return;
            }
            let link = document.createElement("a");
            //创建一个a标签
            link.style.display = "none";
            link.href = `${this.$config.apiUrl}/api/exportFile?id=${this.info.id}&downloadType=${this.info.type}&token=${this.$store.getters.token}`;
            //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
            link.setAttribute("download", name);
            // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            document.body.appendChild(link);
            //将上面创建的a标签加入到body的尾部
            link.click();

          },


            downLoadMore() {
              const url1 = `${this.$config.apiUrl}/api/exportFile?id=${this.info.id}&downloadType=${this.info.type}&token=${this.$store.getters.token}`;
             const url2 = `${this.$config.apiUrl}/api/exportFile?id=${this.info.id}&downloadType=word&token=${this.$store.getters.token}`;
            this.downloadFile1(url1,'111');
            this.downloadFile1(url2,'2222');

            },

          downloadFile1(url,name) {
            const iframe = document.createElement("iframe");
            iframe.style.display = "none";  // 防止影响页面
            iframe.style.height = 0;  // 防止影响页面
            iframe.src = url;
            document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(()=>{
              iframe.remove();
            }, 5 * 60 * 1000);
          },

            handlePaste(event) {
                event.preventDefault();
                return false
            },
            getInfo() {
                let params = this.$route.params
                this.loading = true;
                this.$apis.getDetail(params).then(res => {
                    this.info = res.records
                    this.before = res.before;
                    this.next = res.next;
                    this.last = res.last;
                    this.loading = false;
                    this.config.title = this.info.title
                    this.config.description = this.info.title
                    this.$utils.setPageTitle(this.info.title)
                })
            }
        },
        mounted: function () {
            this.$nextTick(() => {

            })
        }
    };
</script>
<style>
    body {
        background: #f8f8f8 !important
    }

    .downbtnbox .downbtn{
      padding: 2px 5px;
    }

    .readonly {
        /*-webkit-touch-callout: none; !*系统默认菜单被禁用*!
        -webkit-user-select: none; !*webkit浏览器*!
        -khtml-user-select: none; !*早期浏览器*!
        -moz-user-select: none; !*火狐*!
        -ms-user-select: none; !*IE10*!
        user-select: none;*/
    }

    .viewright .widget {
        padding-bottom: 10px;
    }

    .viewleft .widget {
        padding-top: 20px;
    }

    .viewright .widget img {
        width: 100%;
    }

    .viewleft .widget img {
        width: 100%;
    }

    .viewpage .viewhide {
        display: none
    }

    .viewpage .detail {
        min-height: 400px;
    }

    .viewpage .detail p {
        line-height: 25px;
        text-align: left;
        padding: 10px 0px;
    }

    .viewpage .article-tips {
        text-align: center;
        margin: 10px auto 10px;
        font-size: 14px;
        background: #fff3e9;
    }

    .mod_top_nav {
        margin: 0 0 10px;
    }

    .doc_list ul li {
        line-height: 25px !important;
        height: auto !important;
    }

    .doc_list ul li a {
        font-size: 14px;
        color: #000;
        font-weight: 400;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


                         .star {
                           position: relative;
                           width: 0;
                           height: 0;
                           border-right: 3px solid transparent;
                           border-bottom: 8px solid #888888;
                           border-left: 3px solid transparent;
                           transform: rotate(35deg);
    &:hover {
       border-bottom-color: #b32620;
    &::before {
       border-bottom-color: #b32620;
     }
    &::after {
       border-bottom-color: #b32620;
     }
    }
    }
    .star:before {
      content: "";
      position: absolute;
      top: 23.7px;
      left: -10.4px;
      width: 0;
      height: 0;
      border-right: 10px solid transparent;
      border-bottom: 7px solid #888888;
      border-left: 10px solid transparent;
      transform: rotate(-36deg);
    }
    .star:after {
      content: "";
      position: absolute;
      top: 23.7px;
      left: -8.4px;
      width: 0;
      height: 0;
      border-right: 10px solid transparent;
      border-bottom: 7px solid rgba(136, 136, 136, 1);
      border-left: 10px solid transparent;
      transform: rotate(35deg);
    }

</style>
